<template>
  <div>
  <el-dialog title="邻里圈详情" :visible.sync="showDialog_" custom-class='dialog_right MkNeighbourCircleDetail dialogScroll_detail' top="0%" @close='closeDialog("addForm")' @open='openDialog'>
    <div class="operationBtnInRightDialog">
      <span class='infoIcon' v-if="currentObj.publish" @click="downCircle">下架</span>
      <span class='infoIcon' v-else @click="upCircle">上架</span>
      <span class='infoIcon' v-if="currentObj.top" @click="handleCancelUp">取消置顶</span>
      <span class='infoIcon' v-else @click="handleUp">置顶</span>
    </div>
    <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight - 110)+'px'}]">
      <div class="contentDiv">
        <div class="aboutUser">
          <img :src="currentObj.avatar" alt="" class="userImage">
          <div class="userInfo">
            <div class="userName">{{currentObj.name}}</div>
          </div>
        </div>
        <div class="contentText preContainer"><pre>{{currentObj.content}}</pre></div>
        <div class="imagesPart">
          <template v-for="item in currentObj.images" v-if="currentObj.images">
            <div class="imagesContainer" @click="viewImage(item.accessUrl)">
              <img :src="item.thumbImageURL" alt="">
            </div>
          </template>
        </div>
        <div class="timePart">
          <span>{{currentObj.time | formatDate('yyyy-MM-dd HH:mm')}}</span>
          <span>（{{currentObj.loveAmount}}）赞</span>
          <span>（{{currentObj.transmitAmount}}）转发</span>
          <span>（{{currentObj.commentAmount}}）评论</span>
        </div>
        <div class="itemsPart">
          <template v-for="item in dataArr.elements" v-if="dataArr.elements">
            <div class="item">
              <img :src="item.avatar" alt="" class="itemImage">
              <div>
                <span class="itemOperation" v-if="item.publish" @click="handleDownComment(item.id)">下架</span>
                <span class="itemOperation" v-else @click="handleUpComment(item.id)">上架</span>
                <div class="itemName">{{item.name}}</div>
                <div class="itemContent">
                  <span v-if="item.replyToOther">回复 {{item.targetName}}：</span>
                    {{item.content}}
                </div>
                <div class="itemTime">{{item.time | formatDate('MM-dd HH:mm')}}</div>
              </div>
            </div>
          </template>
          <el-pagination v-if='dataArr.elements.length>0'
                         @current-change="loadComments"
                         :current-page="dataArr.page"
                         :page-size="dataArr.size"
                         layout="total, prev, pager, next"
                         :total="dataArr.totalAmount">
          </el-pagination>
        </div>
      </div>
    </el-scrollbar>
  </el-dialog>

    <!--预览图片-->
    <el-dialog :visible.sync="showImageVisible" custom-class="show-image-dialog" top="0%">
      <img :src="viewSrc" alt=""/>
    </el-dialog>

  </div>
</template>

<script>
  import neighbourCircle from '../../../services/neighbourCircle'
  import { mapState } from 'vuex'
  export default {
    name: 'MkNeighbourCircleDetail',
    props:['showDialog','currentId'],
    computed:mapState({
      bodyHeight: state => state.global.bodyHeight,
      fixedHeightSmall: state => state.global.fixedHeightSmall,
    }),
    filters:{
      formatDate(value,type) {
        if(value) {
          return new Date(value).pattern(type);
        }
      }
    },
    watch: {
      showDialog: function(value) {
        this.showDialog_ = value;
      }
    },
    methods: {
      downCircle() {
        neighbourCircle.downCircleServer({id:this.currentId},()=>{
          this.$message.success('下架成功');
          this.isRefresh = true;
          this.showDialog_ = false;
        })
      },
      upCircle() {
        neighbourCircle.upCircleServer({id:this.currentId},()=>{
          this.$message.success('上架成功');
          this.isRefresh = true;
          this.showDialog_ = false;
        })
      },
      handleUp() {
        neighbourCircle.handleUpServer({id:this.currentId},() =>{
          this.$message.success('置顶成功');
          this.isRefresh = true;
          this.showDialog_ = false;
        })
      },
      handleCancelUp() {
        neighbourCircle.handleCancelUpServer({id:this.currentId},() =>{
          this.$message.success('取消置顶成功');
          this.isRefresh = true;
          this.showDialog_ = false;
        })
      },
      handleDownComment(id) {
        neighbourCircle.handleCommentDownServer({id},()=>{
            this.$message.success('下架成功');
            this.loadComments();
        })
      },
      handleUpComment(id) {
        neighbourCircle.handleCommentUpServer({id},()=>{
          this.$message.success('上架成功');
          this.loadComments();
        })
      },
      viewImage(src){
        this.viewSrc = src;
        this.showImageVisible = true;
      },
      openDialog() {
        this.isRefresh = false;
        this.searchInfo.id = this.currentId;
        this.loadData();
        this.loadComments(1);
      },
      loadComments(page) {
          if(page) {
              this.searchInfo['page.pn'] = page;
          }
        neighbourCircle.loadCommentListServer(this.searchInfo,data=>{
          this.dataArr = data.data;
        })
      },
      loadData(){
        neighbourCircle.loadCircleDetailServer({id:this.currentId}, data=>{
          this.currentObj = data.data;
        })
      },
      closeDialog() {
          this.$emit('closeDialog',this.isRefresh);
      }
    },

    data () {
      return {
        isRefresh:false,
        searchInfo:{
          'page.pn':1,
          'page.size':10,
          id:'',
        },
        viewSrc:'',
        showImageVisible: false,
        currentObj: {},
        dataArr:{
          elements:[{}],
          totalAmount:'',
          page:'',
          size:''
        },
        showDialog_:this.showDialog
      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
  @import "../../../assets/style/main.less";
  .MkNeighbourCircleDetail{
    .contentDiv{
      .aboutUser{
        padding-left:60px;
        .userImage{
          float: left;
          margin-left:-60px;
          width:50px;
          height:50px;
          .my-border-radius(50px);
          border: 1px solid @borderColor;
        }
        .userInfo{
          .userName{
            color:@fontColorOne;
            line-height: 50px;
          }
        }
      }
      .contentText{
        margin-top:20px;
        line-height: 20px;
        word-break: break-all;
        color:@fontColorOne;
      }
      .imagesPart{
        margin-top:10px;
        font-size:0;
        overflow: hidden;
        .imagesContainer{
          cursor: pointer;
          margin-right:10px;
          margin-top:-2px!important;
          display: inline-block;
          .showImageInFixedContainer(165px,165px);
        }
        .imagesContainer:nth-child(3){
          margin-right:0;
        }
        .imagesContainer:nth-child(6){
          margin-right:0;
        }
        .imagesContainer:nth-child(9){
          margin-right:0;
        }
      }
      .timePart{
        margin-top:10px;
        border-bottom: 1px solid @borderColor;
        padding-bottom:8px;
        span{
          font-size:12px;
          margin-right:10px;
          color:@fontColorThree;
        }
      }
      .itemsPart{
        margin-top:20px;
        .item:last-child{
          border-bottom: none!important;
        }
        .item{
          border-bottom:1px solid @borderColor;
          padding:10px 60px 10px 40px;
          .itemImage{
            width:30px;
            height:30px;
            .my-border-radius(30px);
            border:1px solid @borderColor;
            float:left;
            margin-left:-40px;
          }
          .itemName{
            font-size:12px;
            color:@fontColorOne;
          }
          .itemContent{
            span{
              color:@fontColorThree;
            }
          }
          .itemOperation{
            float:right;
            margin-right:-50px;
            margin-top:24px;
            color:@fontColorThree;
            cursor: pointer;
            &:hover{
              color:@primaryColor;
            }
          }
          .itemTime{
            color:@fontColorThree;
            font-size:12px;
          }

        }
      }
    }
  }


</style>
